﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no">
    <title>话术赛</title>
    <link type="text/css" rel="stylesheet" href="/static/emotion/css/emotion.css" />
    <!-- 基础css begin -->
    <link type="text/css" rel="stylesheet" href="/static/baojunpkg/core.css">
    <!-- 基础css end -->
    <!-- 公用css begin -->
    <link type="text/css" rel="stylesheet" href="/static/baojunpkg/combine.css?ver=20150629">
    <!-- 公用css end -->
</head>
<body id="detail">
    <img id="background-image" class="background-full" src="/static/baojunbbs/images/bg.jpg" />
    <div id="wrapper">
        <div id="content" class="padding-0">
            <div class="padding-20" style="padding-bottom: 0;">
                <header class="cfix">
                    @*<div id="AuthorAvatar" class="user-avatar float-left">
                            <div class="user-badge"></div>
                        </div>
                        <div class="user-name">
                            <span class="font-color">LV0</span>
                            <span id="article_username"></span>
                        </div>*@
                    <div id="article_title" class="article-title word-wrap float-left"></div>
                    <div class="publish-time margin-top-10 float-right" style="text-align:right;">2015-4-20</div>
                </header>
                <article>
                    <div id="article_content" class="word-wrap" style="color:black;">

                    </div>
                    <div class="margin-top-10 image-box" id="article_imagelist">
                    </div>
                </article>
            </div>
            <section class="actions" style="border-bottom: 1px solid rgba(132, 154, 171, 0.8); margin-bottom: 0px;">
                <div class="padding-20 padding-bottom-0">
                    @*<i id="btnPraise" class="font-size-22 icon-praise margin-right-10" onclick="DiggArticle()"><span class="count">0</span></i>*@
                    <i id="btnComment" class="font-size-22 icon-comment"><span class="count">发帖</span></i>
                </div>
                <div id="comment-input" class="relative" style="display:none;">
                    <div class="padding-20">
                        <textarea id="txtComment" class="input-text width-full" data-emotion maxlength="500"></textarea>
                        <div class="text-align-right relative" style="margin-top:8px;">
                            <i id="btnEmotionSelect" class="icon-emotion" style="position:absolute; left:0;"></i>
                            <button id="btnSubmitComment" type="button" class="button" style="padding:3px 15px;">发表</button>
                        </div>
                    </div>
                    <div data-part="emotion" style="display: none; margin-top: -20px;"></div>
                </div>
            </section>
            <section class="comments" style="padding-top: 0;">
                <ul class="comment-list"></ul>
                <button id="comment_more" type="button" class="default-button margin-top-20 width-full" onclick="BindComments()" style="display: none;">更多评论</button>
            </section>
        </div>
    </div>
    <!-- 组件依赖js begin -->
    <script src="/static/global/gmu/dist/zepto.min.js"></script>
    <script src="/static/global/gmu/src/extend/touch.plus.js"></script>
    <script src="/static/global/gmu/src/extend/selector.js"></script>
    <script src="/static/global/gmu/src/extend/compatibleIE9.js"></script>
    <script src="/static/global/gmu/src/extend/fastclick.js"></script>
    <script src="/static/baojunbbs/js/idangerous.swiper-2.7.min.js"></script>
    <script src="/static/baojunbbs/js/iutility-1.0.src.js"></script>
    <!-- 组件依赖js end -->
    <!-- 公用js begin -->
    <script type="text/javascript" charset="utf-8" src="/static/baojunbbs/js/script.js?v=201506261"></script>
    <!-- 公用js begin -->
    <script id="pageload" type="text/javascript">
        var params = utility.getQueryString();
        var CommentCount = 0;
        $(function ($) {
            FastClick.attach(document.body);
            BindArticle();
            BindComments();
            $("#btnComment").click(toggleCommentInput);
            $("#btnSubmitComment").click(addComment);
            $("#btnEmotionSelect").click(toggleEmotion);
            iUtility.LoadEmotion("/static/emotion/emcode.html?v=5");
        });
        function toggleEmotion() {
            var $emotion = $("[data-part='emotion']");
            if ($emotion.is(":visible")) {
                $emotion.hide();
            } else {
                $emotion.show();
            }
        }
        function toggleCommentInput() {
            if ($("#comment-input").is(":visible")) {
                $("#comment-input").hide();
            } else {
                $("#comment-input").show();
                $("#txtComment").focusin(function () {
                    $(this).focusEnd();
                });
            }
        }
        /*
         *绑定文章内容
        */
        function BindArticle() {
            var articleId = params["id"];
            $.ajax({
                type: "GET",
                url: "/wxbbs/baojun/getarticle?id=" + articleId,
                dataType: "json",
                success: function (objInvokeResult) {
                    if (objInvokeResult.ResultCode == "Success") {
                        ////todo：作者头像\n
                        //$("#AuthorAvatar").css("background-image", "url('" + getUserAvatar(objInvokeResult.Data.ArticleInfo.ObjectId) + "')")\n;
                        if (objInvokeResult.Data.ArticleInfo.S1 != "") {
                            $("#AuthorAvatar").css("background-image", "url('" + objInvokeResult.Data.ArticleInfo.S1 + "')");
                        }
                        //$("title").text(objInvokeResult.Data.ArticleInfo.ArticleTitle);
                        $('#article_username').html(objInvokeResult.Data.ArticleInfo.ArticleAuthor);
                        $('.publish-time').html(JsonToDate(objInvokeResult.Data.ArticleInfo.ApproveDate, false));
                        $("#article_title").html(objInvokeResult.Data.ArticleInfo.ArticleTitle);
                        $("#article_content").html(objInvokeResult.Data.ArticleContent);
                        //$("#btnPraise .count").text(objInvokeResult.Data.ArticleInfo.DiggCount);
                        //$("#btnComment .count").text(objInvokeResult.Data.ArticleInfo.CommentCount);
                        if (objInvokeResult.Data.ArticlePictureCollection) {
                            $.each(objInvokeResult.Data.ArticlePictureCollection, function (i, objArticlePicture) {
                                $("#article_imagelist").append('<div id="img' + (i + 1) + '" class="image image-cover" style="background-image: url(\'' + objArticlePicture.PictureUrl + '\')" data-url="' + objArticlePicture.PictureUrl + '"></div>');
                            });
                        }
                        if (objInvokeResult.Data.ArticleInfo.IsDigg) {
                            $('#btnPraise').removeAttr("onclick");
                            //todo：添加点赞样式
                            $('#btnPraise').removeClass("icon-praise").addClass("icon-praised");
                        }
                        $("#article_imagelist .image").click(function () {
                            slideImage(this);
                        })
                    }
                }
            });
        }
        function addComment() {
            var commentText = $("#txtComment").val();
            var max = 500;
            if (commentText.length > max) {
                alert("评论不能超过" + max + "字");
                $("#txtComment").focus();
                return;
            }
            $.ajax({
                url: "/wxbbs/baojun/addcomment",
                type: "post",
                data: { articleID: params.id, content: commentText },
                dataType: "json",
                success: function (data) {
                    if (data.ResultCode == "Success") {
                        $("#txtComment").val("");
                        toggleCommentInput();
                        appendCommentHTML(commentText, data.Data);
                    } else {
                        alert(data.ResultMessage);
                    }
                }
            })
        }
        function appendCommentHTML(commetText, commendId) {
            var comment = {
                NickName: $("#hidUserName").val(),
                Avatar: $("#hidUserAvatar").val(),
                CreateDate: new Date().getTime().toString(),
                Content: commetText,
                CommentId: commendId,
                DiggCount: 0
            };
            var floor = $('.comment-list li:first').attr("data-floor");
            floor = floor ? parseInt(floor) : 0;
            var html = buildCommentHtml(comment, floor + 1);
            $('.comment-list').prepend(html);
            //$("#avatar_" + (floor+1)).css("background-image", "url('" + comment.Avatar + "')");
            //$("#btnComment .count").text(CommentCount + 1);
        }
        function buildCommentHtml(objCommentInfo, floor) {
            return '<li id="li_' + floor + '" data-id="' + objCommentInfo.CommentId + '" data-floor="' + floor + '">' +
                        '<div class="font-size-14">' +
                            //'<div id="avatar_' + floor + '" ' + (objCommentInfo.Avatar==""?"":'style="background-image: url(\'' + objCommentInfo.Avatar + '\')"') + 'class="user-avatar float-left">' +
                            //    '<div class="user-badge"></div>' +
                            //'</div>' +
                            '<div class="info cfix">' +
                                '<div class="user">' + objCommentInfo.NickName + '</div>' +
                                '<div class="floor">' + floor + '楼</div>' +
                                '<div class="time">' + JsonToDate(objCommentInfo.CreateDate, false) + '</div>' +
                            '</div>' +
                        '</div>' +
                        '<div class="comment">' + Emotion.Replace(objCommentInfo.Content, "/static/emotion/mp/") + '</div>' +
                        //'<div class="comment">' + objCommentInfo.Content + '</div>' +
                '<div style="text-align:right;"><i id="btnPraise' + objCommentInfo.CommentId + '"' + 'class="font-size-22 icon-praise margin-right-10"  onclick="DiggComment(this)"><span class="count">' + objCommentInfo.DiggCount + '</span></i>' +
                    '</div></li>';
        }
        function BindComments() {
            var articleId = params["id"];
            var $commentLast = $('.comment-list li').last();
            var request_url = "";
            var floor = $commentLast.attr("data-floor") != null ? parseInt($commentLast.attr("data-floor")) - 1 : 1;
            if ($commentLast.length > 0) {
                var commentID = parseInt($commentLast.attr("data-id"));
                request_url = "/wxbbs/baojun/commentlist?articleId=" + articleId + "&commentID=" + commentID;
            } else {
                request_url = "/wxbbs/baojun/commentlist?articleId=" + articleId;
            }
            $.ajax({
                type: "GET",
                url: request_url,
                dataType: "json",
                success: function (objInvokeResult) {
                    if (objInvokeResult.ResultCode == "Success") {
                        if ($commentLast.length == 0) floor = CommentCount = objInvokeResult.Data.CommentCount;
                        var html = '';
                        $.each(objInvokeResult.Data.CommentList, function (i, objCommentInfo) {
                            html += buildCommentHtml(objCommentInfo, floor);
                            floor--;
                        });
                        $('.comment-list').append(html);
                        $('#comment_more').show();
                    } else {
                        $('#comment_more').hide();
                    }
                    if ($('.comment-list li').length < 10 || $('.comment-list li:last').attr("data-floor") == 1) {
                        $('#comment_more').hide();
                    }
                }
            });
        }

        function DiggArticle() {
            var articleId = params["id"];
            $.ajax({
                type: "POST",
                url: "/wxbbs/baojun/diggarticle?id=" + articleId,
                dataType: "json",
                success: function (objInvokeResult) {
                    if (objInvokeResult.ResultCode == "Success") {
                        //todo：添加点赞样式
                        $("#btnPraise").removeClass("icon-praise").addClass("icon-praised");
                        var praiseCount = parseInt($("#btnPraise .count").text());
                        $("#btnPraise .count").text(praiseCount + 1);
                    }
                }
            });

        }

        function DiggComment(obj) {
            commentId = $(obj).closest("li").attr("data-id");
            $.ajax({
                type: "POST",
                url: "/wxbbs/baojun/diggcomment?articleId=" + params["id"] + "&commentId=" + commentId,
                dataType: "json",
                async: false,
                success: function (objInvokeResult) {
                    if (objInvokeResult.ResultCode == "Success") {
                        //todo：添加点赞样式
                        var a = "#btnPraise" + commentId;
                        var b = "#btnPraise" + commentId + " .count";
                        $(a).removeClass("icon-praise").addClass("icon-praised");
                        var praiseCount = parseInt($(b).text());
                        $(b).text(praiseCount + 1);
                    } else if (objInvokeResult.ResultCode == "DiggAlready") {
                        alert(objInvokeResult.ResultMessage);
                    }
                },
                error: function (xhr, message) {
                    alert(message);
                }
            });
        }
    </script>
</body>
</html>